<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>08_表单输入绑定</title>
</head>
<body>

<!--
1. 使用v-model(双向数据绑定)自动收集数据
  text/textarea
  checkbox
  radio
  select
-->

<div id="demo">
	<form action="/xxx" @submit.prevent="handleSubmit">
		<label for="username"><span>用户名:</span></label>
		<input type="text" id="username" v-model="username"><br>
		<label for="pwd"><span>密码:</span></label>
		<input type="password" id="pwd" v-model="pwd"><br>
		<span>性别:</span>
		<input type="radio" name="sex" id="female" value="女" v-model="sex">
		<label for="female">女</label>
		<input type="radio" v-model="sex" name="sex" id="male" value="男">
		<label for="male">男</label><br>
		<span>爱好:</span>
		<input type="checkbox" value="篮球" id="basket"
		v-model="likes">
		<label for="basket">篮球</label>
		<input type="checkbox" v-model="likes" value="足球" id="football">
		<label for="football">足球</label>
		<input type="checkbox" value="排球" v-model="likes" id="volleyball">
		<label for="volleyball">排球</label><br>
		<span>城市：</span>
		<select v-model="cityId">
			<!-- <option value="">请选择</option> -->
			<option v-for="(c,i) in citys" :key="c.id" :value="c.name" value="">{{i}}--{{c.name}}</option>
		</select><br>
		<span>介绍:</span>
		<textarea row="10" v-model="desc"></textarea><br><br>

		<input type="submit" value="注册">
	</form>
</div>
<script src="../js/vue.js"></script>
<script>
	const vm = new Vue({
		el: '#demo',
		data: {
            username: "",
            pwd: "",
            sex: "女",
            likes: ["足球","排球"],
            citys: [
             {id:1,name:"北京"},
             {id:2,name:"上海"},
             {id:3,name:"广州"},
             {id:4,name:"深圳"}
            ],
            cityId: "上海",
            desc: "",
		},
		computed: {

		},
		methods: {
            handleSubmit(){
            	console.log(this.username,this.pwd,this.sex,this.likes,this.cityId,this.desc);
            }
		},
		watch: {

		}
	})
</script>
</body>
</html>